<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>要素入れ替え</title>

<link href="../jQuery/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#sortable1,#sortable2 {
	list-style-type: none;
	margin: 0px 10px 0px 0px;
	padding: 5px;
	border: 1px solid #666666;
	width: 30%;
	float: left;
}

#sortable1 li,#sortable2 li {
	margin: 0 5px 5px 5px;
	padding: 5px;
}

.ui-state-highlight {
	height: 1.5em;
	border-style: dashed;
}
</style>
<!-- 
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery-ui.js"></script>
	<script type="text/javascript" src="js/cookie.js"></script>
	 -->
<script src="../jQuery/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../jQuery/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$("#sortable1, #sortable2").sortable({
			connectWith : 'ul',
			placeholder : 'ui-state-highlight'
		}).disableSelection();
		
		// TODO 並び順に変化があったときには、並び順をクッキーに保存
		$("#sortable1, #sortable2").bind('sortupdate',
			function(event, ui) {
				$.cookie('sortable1', $("#sortable1").sortable('toArray').join(','));
				$.cookie('sortable2', $("#sortable2").sortable('toArray').join(','));
			}
		);
	});
</script>
</head>
<body>
	<p>要素入れ替え（list）</p>
	<ul id="sortable1" class="droptrue">
		<li id="item1_1" class="ui-state-default">項目1-1</li>
		<li id="item1_2" class="ui-state-default">項目1-2</li>
		<li id="item1_3" class="ui-state-default">項目1-3</li>
		<li id="item1_4" class="ui-state-default">項目1-4</li>
		<li id="item1_5" class="ui-state-default">項目1-5</li>
	</ul>
	<ul id="sortable2" class="droptrue">
		<li id="item2_1" class="ui-state-default">項目2-1</li>
		<li id="item2_2" class="ui-state-default">項目2-2</li>
		<li id="item2_3" class="ui-state-default">項目2-3</li>
		<li id="item2_4" class="ui-state-default">項目2-4</li>
		<li id="item2_5" class="ui-state-default">項目2-5</li>
	</ul>
</body>
</html>